<template>
    <div id="joinClassContainer">
        <div id="headTitle">加入班级</div>
        <div>
            <el-input id="searchTextInput" v-model="searchClass" placeholder="请输入搜索的班级名" style="width: 400px"/>
            <el-button type="primary" @click="loadClassData">搜索</el-button>
        </div>
        <div id="table">
            <el-table @selection-change="handleSelectionChange" max-height="700" :data="classData" border>
                <el-table-column id="classID" prop="classID" label="班级ID" show-overflow-tooltip align="center"/>
                <el-table-column id="className" prop="className" label="班级" show-overflow-tooltip align="center"/>
                <el-table-column label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button type="primary" v-if="scope.row.isBan == '否'" plain
                                   @click="joinClass(scope.row.classID,scope.row.className)">
                            加入班级
                        </el-button>
                        <el-button type="info" disabled="true" v-if="scope.row.isBan == '是'" plain>已禁封</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="pagination">
            <el-pagination
                    v-model:current-page="pageNumber"
                    v-model:page-size="pageSize"
                    :page-sizes="[2, 5, 10, 15, 20]"
                    :small=false
                    :disabled=false
                    :background=false
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="classTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
//css
import "../assets/JoinClass.css";
//请求
import request from '@/utils/requset.js';
//顶部提示信息
import prompt from '@/utils/prompt.js'
//路由跳转
import router from "@/router";
import {reactive, ref} from "vue";

export default {
    name: 'classInfo',
    data() {
        return {
            classData: [],
            classTotal: 0,
            pageNumber: 1,
            pageSize: 2,
            joinClassData: {},
            searchClass: '',
        }
    },
    created() {
        if (!this.isIntoClass()) {
            this.loadClassData();
        }
    },
    methods: {
        isIntoClass() {
            let classID = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).classID : 0;
            if (classID < 1) {
                return false;
            }
            prompt("已加入班级，无需加入！", "error");
            router.push({path: "home"});
            return true;
        },
        loadClassData() {
            request.get("/class/info", {
                params: {
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    searchClass: this.searchClass,
                }
            }).then(result => {
                //请求失败
                if (result.code !== "200") {
                    prompt(result.message, result.type);
                }
                //请求成功
                this.classData = result.data.classData;
                this.classTotal = result.data.classTotal;
            })
        },
        joinClass(classID, className) {
            this.joinClassData.classID = classID;
            this.joinClassData.userToken = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            request.post(
                "/class/join",
                this.joinClassData
            ).then(result => {
                if (result.code != "200") {
                    prompt("加入" + className + "失败", result.type);
                    router.push({path: "home"});
                    return;
                }
                prompt("成功加入" + className, result.type);
                router.push({path: "home"});
            });
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loadClassData();
        },
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber;
            this.loadClassData();
        },
        handleSelectionChange() {
        }
    }
}
</script>